<template>
  <div class="paper-container">
    <h1 class="page-title">试卷生成</h1>
    
    <!-- 输入区 -->
    <div class="input-section" v-if="!isGenerating && !paperResult">
      <div class="form-group">
        <label>试卷名称</label>
        <input 
          type="text" 
          v-model="formData.title" 
          placeholder="请输入试卷名称，如：2023年春季学期期末考试"
        >
      </div>
      
      <div class="form-group">
        <label>学科</label>
        <select v-model="formData.subject">
          <option value="">请选择学科</option>
          <option 
            v-for="subject in subjects" 
            :key="subject.value" 
            :value="subject.value"
          >
            {{ subject.label }}
          </option>
        </select>
      </div>
      
      <div class="form-group">
        <label>考试类型</label>
        <div class="exam-type-selector">
          <div 
            v-for="type in examTypes" 
            :key="type.value"
            :class="['type-item', { active: formData.examType === type.value }]"
            @click="formData.examType = type.value"
          >
            {{ type.label }}
          </div>
        </div>
      </div>
      
      <div class="form-group">
        <label>考试时长（分钟）</label>
        <input 
          type="number" 
          v-model.number="formData.duration" 
          placeholder="90"
          min="30"
          max="180"
        >
      </div>
      
      <div class="form-group">
        <label>试卷结构</label>
        <div class="paper-structure">
          <div 
            v-for="(section, index) in formData.sections" 
            :key="index"
            class="section-item"
          >
            <div class="section-header">
              <div class="section-title">{{ getRomanNumeral(index + 1) }}. {{ section.name }}</div>
              <div class="section-actions">
                <button 
                  class="action-btn" 
                  @click="removeSection(index)"
                  v-if="formData.sections.length > 1"
                >
                  删除
                </button>
              </div>
            </div>
            
            <div class="section-content">
              <div class="section-row">
                <div class="section-field">
                  <label>题型</label>
                  <select v-model="section.type">
                    <option value="">请选择题型</option>
                    <option 
                      v-for="type in exerciseTypes" 
                      :key="type.value" 
                      :value="type.value"
                    >
                      {{ type.label }}
                    </option>
                  </select>
                </div>
                
                <div class="section-field">
                  <label>题目数量</label>
                  <input 
                    type="number" 
                    v-model.number="section.count" 
                    min="1"
                    max="20"
                  >
                </div>
                
                <div class="section-field">
                  <label>每题分值</label>
                  <input 
                    type="number" 
                    v-model.number="section.points" 
                    min="1"
                    max="20"
                  >
                </div>
              </div>
              
              <div class="section-row">
                <div class="section-field full-width">
                  <label>知识点范围</label>
                  <input 
                    type="text" 
                    v-model="section.topics" 
                    placeholder="请输入知识点，多个知识点用逗号分隔"
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <button class="add-section-btn" @click="addSection">
          + 添加试卷部分
        </button>
      </div>
      
      <div class="form-group">
        <label>难度分布</label>
        <div class="difficulty-distribution">
          <div class="difficulty-item">
            <span class="difficulty-label">容易</span>
            <input 
              type="range" 
              v-model.number="formData.difficultyDistribution.easy" 
              min="0" 
              max="100"
              step="5"
              @input="adjustDifficulty('easy')"
            >
            <span class="difficulty-value">{{ formData.difficultyDistribution.easy }}%</span>
          </div>
          
          <div class="difficulty-item">
            <span class="difficulty-label">中等</span>
            <input 
              type="range" 
              v-model.number="formData.difficultyDistribution.medium" 
              min="0" 
              max="100"
              step="5"
              @input="adjustDifficulty('medium')"
            >
            <span class="difficulty-value">{{ formData.difficultyDistribution.medium }}%</span>
          </div>
          
          <div class="difficulty-item">
            <span class="difficulty-label">困难</span>
            <input 
              type="range" 
              v-model.number="formData.difficultyDistribution.hard" 
              min="0" 
              max="100"
              step="5"
              @input="adjustDifficulty('hard')"
            >
            <span class="difficulty-value">{{ formData.difficultyDistribution.hard }}%</span>
          </div>
        </div>
        
        <div 
          class="distribution-total" 
          :class="{ 'error': totalDistribution !== 100 }"
        >
          总计: {{ totalDistribution }}% {{ totalDistribution !== 100 ? '(必须等于100%)' : '' }}
        </div>
      </div>
      
      <div class="form-group">
        <label>附加要求</label>
        <textarea 
          v-model="formData.requirements" 
          placeholder="可选：输入对试卷的特殊要求，如：侧重应用题、包含开放性问题等"
          rows="3"
        ></textarea>
      </div>
      
      <button 
        class="generate-btn" 
        :disabled="!isFormValid" 
        @click="generatePaper"
      >
        确认输入，生成试卷
      </button>
    </div>
    
    <!-- 加载状态 -->
    <div class="loading-section" v-if="isGenerating">
      <div class="loading-spinner"></div>
      <p>正在生成试卷，请稍候...</p>
      <p class="loading-hint">正在组织试题并进行排版，这可能需要一些时间</p>
    </div>
    
    <!-- 结果预览区 -->
    <div class="result-section" v-if="paperResult">
      <div class="paper-preview">
        <div class="paper-header">
          <h2 class="paper-title">{{ paperResult.title }}</h2>
          <div class="paper-meta">
            <div class="meta-item">学科：{{ getSubjectLabel() }}</div>
            <div class="meta-item">时长：{{ paperResult.duration }}分钟</div>
            <div class="meta-item">总分：{{ paperResult.totalPoints }}分</div>
          </div>
          <div class="paper-instructions">
            <p>注意事项：</p>
            <ol>
              <li>请仔细阅读题目要求，按照要求作答。</li>
              <li>答题前，请在答题卡上填写姓名、学号等信息。</li>
              <li>请保持卷面整洁，字迹清晰。</li>
            </ol>
          </div>
        </div>
        
        <div class="paper-content">
          <div 
            v-for="(section, sectionIndex) in paperResult.sections" 
            :key="sectionIndex"
            class="paper-section"
          >
            <div class="section-header">
              <h3>{{ getRomanNumeral(sectionIndex + 1) }}. {{ section.name }}（共{{ section.count }}题，每题{{ section.points }}分，共{{ section.count * section.points }}分）</h3>
            </div>
            
            <div class="section-questions">
              <div 
                v-for="(question, questionIndex) in section.questions" 
                :key="questionIndex"
                class="question-item"
              >
                <div class="question-number">{{ questionIndex + 1 }}.</div>
                <div class="question-content">
                  <div class="question-text" v-html="formatContent(question.text)"></div>
                  
                  <div v-if="section.type === 'choice'" class="question-options">
                    <div 
                      v-for="(option, optionIndex) in question.options" 
                      :key="optionIndex"
                      class="option-item"
                    >
                      <span class="option-label">{{ String.fromCharCode(65 + optionIndex) }}.</span>
                      <span v-html="formatContent(option)"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="result-actions">
        <button class="action-btn edit" @click="editPaper">编辑</button>
        <button class="action-btn save" @click="savePaper">保存</button>
        <button class="action-btn export" @click="exportPaper">打印/导出</button>
        <button class="action-btn answer" @click="toggleAnswerKey">{{ showAnswerKey ? '隐藏答案' : '查看答案' }}</button>
      </div>
      
      <!-- 答案预览 -->
      <div v-if="showAnswerKey" class="answer-key-section">
        <h3 class="answer-key-title">参考答案</h3>
        
        <div class="answer-key-content">
          <div 
            v-for="(section, sectionIndex) in paperResult.sections" 
            :key="sectionIndex"
            class="answer-section"
          >
            <h4>{{ getRomanNumeral(sectionIndex + 1) }}. {{ section.name }}</h4>
            
            <div class="answer-list">
              <div 
                v-for="(question, questionIndex) in section.questions" 
                :key="questionIndex"
                class="answer-item"
              >
                <div class="answer-number">{{ questionIndex + 1 }}.</div>
                <div class="answer-content">
                  <div v-if="section.type === 'choice'" class="answer-text">
                    {{ question.answer }}
                  </div>
                  <div v-else class="answer-text" v-html="formatContent(question.answer)"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useResourceStore } from '../../stores/resourceStore'
import apiService from '../../api'

const router = useRouter()
const resourceStore = useResourceStore()

// 表单数据
const formData = ref({
  title: '',
  subject: '',
  examType: 'midterm',
  duration: 90,
  sections: [
    {
      name: '选择题',
      type: 'choice',
      count: 10,
      points: 3,
      topics: ''
    },
    {
      name: '填空题',
      type: 'fill',
      count: 5,
      points: 4,
      topics: ''
    },
    {
      name: '解答题',
      type: 'calculation',
      count: 3,
      points: 10,
      topics: ''
    }
  ],
  difficultyDistribution: {
    easy: 30,
    medium: 50,
    hard: 20
  },
  requirements: ''
})

// 学科选项
const subjects = [
  { label: '数学', value: 'math' },
  { label: '语文', value: 'chinese' },
  { label: '英语', value: 'english' },
  { label: '物理', value: 'physics' },
  { label: '化学', value: 'chemistry' },
  { label: '生物', value: 'biology' },
  { label: '历史', value: 'history' },
  { label: '地理', value: 'geography' },
  { label: '政治', value: 'politics' },
  { label: '信息技术', value: 'it' }
]

// 考试类型选项
const examTypes = [
  { label: '期中考试', value: 'midterm' },
  { label: '期末考试', value: 'final' },
  { label: '单元测试', value: 'unit' },
  { label: '模拟考试', value: 'mock' },
  { label: '随堂测验', value: 'quiz' }
]

// 题型选项
const exerciseTypes = [
  { label: '选择题', value: 'choice' },
  { label: '填空题', value: 'fill' },
  { label: '简答题', value: 'short' },
  { label: '计算题', value: 'calculation' },
  { label: '论述题', value: 'essay' }
]

// 状态变量
const isGenerating = ref(false)
const paperResult = ref(null)
const showAnswerKey = ref(false)

// 计算难度分布总和
const totalDistribution = computed(() => {
  const { easy, medium, hard } = formData.value.difficultyDistribution
  return easy + medium + hard
})

// 表单验证
const isFormValid = computed(() => {
  // 基本验证
  const basicValid = (
    formData.value.title.trim() !== '' &&
    formData.value.subject !== '' &&
    formData.value.examType !== '' &&
    formData.value.duration >= 30 &&
    formData.value.duration <= 180 &&
    totalDistribution.value === 100
  )
  
  // 验证每个部分
  const sectionsValid = formData.value.sections.every(section => {
    return (
      section.name.trim() !== '' &&
      section.type !== '' &&
      section.count >= 1 &&
      section.count <= 20 &&
      section.points >= 1 &&
      section.points <= 20
    )
  })
  
  return basicValid && sectionsValid
})

// 添加试卷部分
const addSection = () => {
  formData.value.sections.push({
    name: '新部分',
    type: '',
    count: 5,
    points: 5,
    topics: ''
  })
}

// 删除试卷部分
const removeSection = (index) => {
  formData.value.sections.splice(index, 1)
}

// 调整难度分布
const adjustDifficulty = (changedType) => {
  const { easy, medium, hard } = formData.value.difficultyDistribution
  const total = easy + medium + hard
  
  // 如果总和超过100%，调整其他难度
  if (total > 100) {
    const excess = total - 100
    
    if (changedType === 'easy') {
      // 调整中等和困难
      const mediumRatio = medium / (medium + hard)
      const hardRatio = hard / (medium + hard)
      
      formData.value.difficultyDistribution.medium = Math.max(0, Math.round(medium - excess * mediumRatio))
      formData.value.difficultyDistribution.hard = Math.max(0, Math.round(hard - excess * hardRatio))
    } else if (changedType === 'medium') {
      // 调整容易和困难
      const easyRatio = easy / (easy + hard)
      const hardRatio = hard / (easy + hard)
      
      formData.value.difficultyDistribution.easy = Math.max(0, Math.round(easy - excess * easyRatio))
      formData.value.difficultyDistribution.hard = Math.max(0, Math.round(hard - excess * hardRatio))
    } else if (changedType === 'hard') {
      // 调整容易和中等
      const easyRatio = easy / (easy + medium)
      const mediumRatio = medium / (easy + medium)
      
      formData.value.difficultyDistribution.easy = Math.max(0, Math.round(easy - excess * easyRatio))
      formData.value.difficultyDistribution.medium = Math.max(0, Math.round(medium - excess * mediumRatio))
    }
  }
}

// 获取罗马数字
const getRomanNumeral = (num) => {
  const romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X']
  return romanNumerals[num - 1] || num.toString()
}

// 获取学科标签
const getSubjectLabel = () => {
  if (!paperResult.value) return ''
  const subject = subjects.find(s => s.value === paperResult.value.subject)
  return subject ? subject.label : ''
}

// 格式化内容（处理数学公式等）
const formatContent = (content) => {
  if (!content) return ''
  
  // 这里可以添加对数学公式等特殊内容的处理
  // 实际项目中可能需要使用 MathJax 或 KaTeX 等库处理数学公式
  
  // 简单的换行处理
  return content.replace(/\n/g, '<br>')
}

// 生成试卷
const generatePaper = async () => {
  try {
    isGenerating.value = true
    
    // 准备请求参数
    const params = {
      title: formData.value.title,
      subject: formData.value.subject,
      examType: formData.value.examType,
      duration: formData.value.duration,
      sections: formData.value.sections.map(section => ({
        name: section.name,
        type: section.type,
        count: section.count,
        points: section.points,
        topics: section.topics.split(',').map(t => t.trim()).filter(t => t !== '')
      })),
      difficultyDistribution: formData.value.difficultyDistribution,
      requirements: formData.value.requirements.trim() || undefined
    }
    
    // 调用API生成试卷
    // 实际项目中应该调用后端API
    // const response = await apiService.paper.generate(params)
    
    // 模拟API响应
    await new Promise(resolve => setTimeout(resolve, 3000))
    
    // 计算总分
    const totalPoints = params.sections.reduce((sum, section) => {
      return sum + (section.count * section.points)
    }, 0)
    
    // 模拟返回数据
    const mockResponse = {
      title: params.title,
      subject: params.subject,
      examType: params.examType,
      duration: params.duration,
      totalPoints,
      sections: [],
      createdAt: new Date().toLocaleString()
    }
    
    // 为每个部分生成模拟题目
    for (const section of params.sections) {
      const mockQuestions = []
      
      for (let i = 0; i < section.count; i++) {
        let question = {
          text: '',
          answer: ''
        }
        
        // 根据题型生成不同的题目内容
        if (section.type === 'choice') {
          if (params.subject === 'math') {
            question.text = `已知函数$f(x)=x^2-${i+1}x+${i}$，则$f(${i})$的值为？`
            question.options = [
              `$${i*i-i*(i+1)+i}$`,
              `$${i*i-i*(i+1)+i+1}$`,
              `$${i*i-i*(i+1)+i-1}$`,
              `$${i*i-i*(i+1)+i+2}$`
            ]
            question.answer = 'A'
          } else if (params.subject === 'physics') {
            question.text = `以下关于牛顿运动定律的说法，正确的是？`
            question.options = [
              '物体的加速度与所受合外力成正比，与质量成反比',
              '物体的速度与所受合外力成正比，与质量成反比',
              '物体的加速度与所受合外力成反比，与质量成正比',
              '物体的速度与所受合外力成反比，与质量成正比'
            ]
            question.answer = 'A'
          } else {
            question.text = `关于${section.topics[i % section.topics.length] || '知识点'}的描述，以下哪项是正确的？`
            question.options = [
              '选项A的内容',
              '选项B的内容',
              '选项C的内容',
              '选项D的内容'
            ]
            question.answer = 'B'
          }
        } else if (section.type === 'fill') {
          if (params.subject === 'math') {
            question.text = `已知等比数列$\\{a_n\\}$的前三项为$1,2,4$，则$a_5=\\_\\_\\_\\_$。`
            question.answer = '$16$'
          } else {
            question.text = `${section.topics[i % section.topics.length] || '知识点'}的核心概念是\\_\\_\\_\\_。`
            question.answer = '参考答案'
          }
        } else if (section.type === 'calculation') {
          if (params.subject === 'math') {
            question.text = `求函数$f(x)=\\ln(x^2+${i+1})$在点$(0,\\ln${i+1})$处的切线方程。`
            question.answer = '解：$f^\\prime(x)=\\frac{2x}{x^2+${i+1}}$，所以$f^\\prime(0)=0$。\n因为$f(0)=\\ln${i+1}$，所以切线方程为$y-\\ln${i+1}=0\\cdot(x-0)$，即$y=\\ln${i+1}$。'
          } else if (params.subject === 'physics') {
            question.text = `一个质量为${i+1}kg的物体在水平面上受到${i+5}N的水平推力，已知物体与平面之间的动摩擦因数为0.2，重力加速度取10m/s²，求物体的加速度大小。`
            question.answer = `解：物体受到的摩擦力$f=\\mu mg=0.2\\times ${i+1}\\times 10=${0.2*(i+1)*10}N$，\n合外力$F=${i+5}-${0.2*(i+1)*10}=${i+5-0.2*(i+1)*10}N$，\n由牛顿第二定律得加速度$a=\\frac{F}{m}=\\frac{${i+5-0.2*(i+1)*10}}{${i+1}}=${(i+5-0.2*(i+1)*10)/(i+1)}m/s^2$`
          } else {
            question.text = `关于${section.topics[i % section.topics.length] || '知识点'}的计算问题：...`
            question.answer = '解：...(计算过程)...\n答：...'
          }
        } else if (section.type === 'short') {
          question.text = `简述${section.topics[i % section.topics.length] || '知识点'}的主要特点。`
          question.answer = '参考答案：\n1. 特点一；\n2. 特点二；\n3. 特点三...'
        } else if (section.type === 'essay') {
          question.text = `论述${section.topics[i % section.topics.length] || '知识点'}的发展历程及其重要意义。`
          question.answer = '参考答案：\n一、发展历程\n1. 早期阶段...\n2. 发展阶段...\n3. 现代应用...\n\n二、重要意义\n1. 理论意义...\n2. 实践价值...'
        }
        
        mockQuestions.push(question)
      }
      
      mockResponse.sections.push({
        name: section.name,
        type: section.type,
        count: section.count,
        points: section.points,
        questions: mockQuestions
      })
    }
    
    // 设置结果
    paperResult.value = mockResponse
    showAnswerKey.value = false
    
    // 保存到状态管理
    resourceStore.setPaperData(mockResponse)
    
  } catch (error) {
    console.error('生成试卷失败:', error)
    // 可以在这里添加错误提示
  } finally {
    isGenerating.value = false
  }
}

// 编辑试卷
const editPaper = () => {
  // 将当前结果数据填充到表单中
  formData.value.title = paperResult.value.title
  formData.value.subject = paperResult.value.subject
  formData.value.examType = paperResult.value.examType
  formData.value.duration = paperResult.value.duration
  
  // 设置试卷部分
  formData.value.sections = paperResult.value.sections.map(section => ({
    name: section.name,
    type: section.type,
    count: section.count,
    points: section.points,
    topics: ''
  }))
  
  // 清空结果，返回编辑状态
  paperResult.value = null
}

// 保存试卷
const savePaper = async () => {
  try {
    // 调用API保存试卷
    // 实际项目中应该调用后端API
    // await apiService.resource.save({
    //   type: 'paper',
    //   data: paperResult.value
    // })
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 显示成功提示
    alert('试卷已保存到资源库')
    
  } catch (error) {
    console.error('保存试卷失败:', error)
    // 可以在这里添加错误提示
  }
}

// 导出试卷
const exportPaper = async () => {
  try {
    // 调用API导出试卷
    // 实际项目中应该调用后端API
    // const response = await apiService.paper.export(paperResult.value.id)
    // 
    // // 创建下载链接
    // const url = window.URL.createObjectURL(new Blob([response]))
    // const link = document.createElement('a')
    // link.href = url
    // link.setAttribute('download', `${paperResult.value.title}.pdf`)
    // document.body.appendChild(link)
    // link.click()
    // document.body.removeChild(link)
    
    // 模拟导出功能
    alert('导出功能在实际项目中需要后端支持')
    
  } catch (error) {
    console.error('导出试卷失败:', error)
    // 可以在这里添加错误提示
  }
}

// 切换显示答案
const toggleAnswerKey = () => {
  showAnswerKey.value = !showAnswerKey.value
}

// 页面加载时检查是否有已生成的试卷数据
onMounted(() => {
  const savedPaper = resourceStore.getPaperData
  if (savedPaper && savedPaper.title) {
    paperResult.value = savedPaper
    showAnswerKey.value = false
  }
})
</script>

<style scoped>
.paper-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  font-size: 1.8rem;
  margin-bottom: 24px;
  color: #333;
  font-weight: 600;
}

/* 输入区样式 */
.input-section {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: #4b6cb7;
  outline: none;
}

/* 考试类型选择器样式 */
.exam-type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.type-item {
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #f5f5f5;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.type-item.active {
  background-color: #4b6cb7;
  color: white;
}

/* 试卷结构样式 */
.paper-structure {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.section-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.section-title {
  font-weight: 500;
  color: #333;
}

.section-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  color: #666;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: #e0e0e0;
}

.section-content {
  padding: 16px;
}

.section-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.section-row:last-child {
  margin-bottom: 0;
}

.section-field {
  flex: 1;
}

.section-field.full-width {
  flex: 1 0 100%;
}

.section-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: #555;
}

.add-section-btn {
  width: 100%;
  padding: 10px;
  background-color: #f0f5ff;
  color: #4b6cb7;
  border: 1px dashed #4b6cb7;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

.add-section-btn:hover {
  background-color: #e6f0ff;
}

/* 难度分布样式 */
.difficulty-distribution {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.difficulty-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.difficulty-label {
  width: 40px;
  font-size: 0.9rem;
  color: #555;
}

.difficulty-item input[type="range"] {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #ddd;
  outline: none;
  border-radius: 3px;
}

.difficulty-item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4b6cb7;
  cursor: pointer;
}

.difficulty-value {
  width: 50px;
  text-align: right;
  font-size: 0.9rem;
  color: #555;
}

.distribution-total {
  text-align: right;
  font-size: 0.9rem;
  color: #555;
  margin-top: 8px;
}

.distribution-total.error {
  color: #e53935;
}

/* 生成按钮样式 */
.generate-btn {
  width: 100%;
  padding: 12px;
  background-color: #4b6cb7;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.generate-btn:hover {
  background-color: #3b5998;
}

.generate-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* 加载状态样式 */
.loading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(75, 108, 183, 0.1);
  border-radius: 50%;
  border-top-color: #4b6cb7;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.loading-hint {
  color: #888;
  font-size: 0.9rem;
  margin-top: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 结果预览区样式 */
.result-section {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 试卷预览样式 */
.paper-preview {
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  padding: 30px;
  margin-bottom: 24px;
}

.paper-header {
  text-align: center;
  margin-bottom: 30px;
}

.paper-title {
  font-size: 1.5rem;
  margin: 0 0 16px 0;
  font-weight: 600;
}

.paper-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 0.95rem;
  color: #555;
}

.paper-instructions {
  text-align: left;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 12px 16px;
  background-color: #f9f9f9;
  font-size: 0.9rem;
  color: #555;
}

.paper-instructions p {
  margin: 0 0 8px 0;
  font-weight: 500;
}

.paper-instructions ol {
  margin: 0;
  padding-left: 20px;
}

.paper-instructions li {
  margin-bottom: 4px;
}

.paper-content {
  text-align: left;
}

.paper-section {
  margin-bottom: 30px;
}

.paper-section:last-child {
  margin-bottom: 0;
}

.paper-section .section-header h3 {
  font-size: 1.1rem;
  margin: 0 0 16px 0;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.section-questions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-item {
  display: flex;
  gap: 12px;
}

.question-number {
  font-weight: 500;
  color: #333;
}

.question-content {
  flex: 1;
}

.question-text {
  margin-bottom: 12px;
  line-height: 1.6;
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 20px;
}

.option-item {
  display: flex;
  gap: 8px;
}

.option-label {
  font-weight: 500;
  color: #555;
}

/* 结果操作按钮样式 */
.result-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.action-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.action-btn.edit {
  background-color: #f5f5f5;
  color: #666;
}

.action-btn.edit:hover {
  background-color: #e0e0e0;
}

.action-btn.save {
  background-color: #4b6cb7;
  color: white;
}

.action-btn.save:hover {
  background-color: #3b5998;
}

.action-btn.export {
  background-color: #f0f5ff;
  color: #4b6cb7;
  border: 1px solid #4b6cb7;
}

.action-btn.export:hover {
  background-color: #e6f0ff;
}

.action-btn.answer {
  background-color: #fff3e0;
  color: #ff9800;
  border: 1px solid #ff9800;
}

.action-btn.answer:hover {
  background-color: #ffe0b2;
}

/* 答案预览样式 */
.answer-key-section {
  border: 1px solid #ff9800;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff8e1;
}

.answer-key-title {
  font-size: 1.2rem;
  margin: 0 0 20px 0;
  color: #f57c00;
  font-weight: 600;
  text-align: center;
}

.answer-section {
  margin-bottom: 24px;
}

.answer-section:last-child {
  margin-bottom: 0;
}

.answer-section h4 {
  font-size: 1rem;
  margin: 0 0 12px 0;
  color: #555;
  font-weight: 600;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 6px;
}

.answer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.answer-item {
  display: flex;
  gap: 12px;
}

.answer-number {
  font-weight: 500;
  color: #555;
}

.answer-content {
  flex: 1;
}

.answer-text {
  line-height: 1.6;
  color: #555;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .section-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .result-actions {
    flex-wrap: wrap;
  }
  
  .action-btn {
    flex: 1 0 calc(50% - 6px);
  }
  
  .paper-meta {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  
  .paper-preview {
    padding: 16px;
  }
}
</style>